<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>留言板1.0</title>
	<link rel="stylesheet" href="./temp/css/bootstrap.min.css">
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">留言板</a>
        </div>
        <?php if(isset($_SESSION['username'])){ ?>
            <div id="navbar" class="navbar-collapse collapse">
            <div 
            class="navbar-form navbar-right">
              <button type="submit" class="btn btn-success"><?php echo $_SESSION['username']; ?></button>
              <a href="./loginout.php" type="submit" class="btn btn-danger">退出</a>
            </div>
          </div>
        <?php }else{ ?>
        
        <div id="navbar" class="navbar-collapse collapse">
          <form action="./login.php" method="post" 
          class="navbar-form navbar-right" id="loginform">
            <div class="form-group">
              <input type="text" name="username" placeholder="用户名" class="form-control">
            </div>
            <div class="form-group">
              <input type="password" name="password" placeholder="密码" class="form-control">
            </div>
            <button type="button" id="login" class="btn btn-success">登录</button>
            <a href="./reg.php" type="submit" class="btn btn-success">注册</a>
          </form>
        </div>

        <?php } ?>

      </div>
    </nav>
   <div class="container" style="margin-top: 80px;">
      <!-- Example row of columns -->
      <div class="row" id="content">
      	<?php foreach ($oldData as $k => $row): ?>
        <div class="col-sm-4">
		    <div class="panel panel-success">
		        <div class="panel-heading" style="height: 40px;">
		            <h3 class="panel-title" style="float: left;"><?php echo $row['username']; ?></h3>
		            <a href="./edit.php?mid=<?php echo $row['mid']; ?>" style="float: right;margin-left: 10px;" class="label label-success">修改</a>
		            <a href="./del.php?mid=<?php echo $row['mid']; ?>" style="float: right;" class="label label-danger">删除</a></div>
		        <div class="panel-body"><?php echo $row['content']; ?>(<?php echo Ftime($row['ctime']); ?>)</div>
		    </div>
		</div>
		<?php endforeach ?>
      </div>
      <nav aria-label="...">
        <ul class="pagination">
          <!-- 判断上一页 -->
          <?php if($p!=1){ ?>
            <li class="
          "><a href="./index.php?p=<?php echo $p-1; ?>" aria-label="Previous"><span aria-hidden="true">上一页</span></a></li>
          <?php } ?>
          <!-- 循环所有页码 -->
          <?php for ($i=1; $i <=$total ; $i++) { ?>
            <li <?php if($p==$i){ echo "class='active'";} ?>><a href="./index.php?p=<?php echo $i; ?>"><?php echo $i; ?></a></li>
          <?php } ?>
          <!-- 判断下一页 -->
          <?php if($p<$total) { ?>
          <li><a href="./index.php?p=<?php echo $p+1; ?>" aria-label="Next"><span aria-hidden="true">下一页</span></a></li>
          <?php } ?>

       </ul>
     </nav>
     <div class="row" style="text-align: center;">
        <button class="btn btn-success" id="more">获取更多</button> 
     </div>
      <div class="row" style="margin-top: 50px;">
      	<div class="col-sm-12">
        <form class="form-inline" action="./add.php" method="post">
		  <div class="form-group">
		    <label for="exampleInputName2">姓名</label>
		    <?php echo isset($_SESSION['username']) ? $_SESSION['username'] :'未登录'; ?>
		  </div>
		  <button type="submit" class="btn btn-success">发布</button>
		  <div class="col-sm-12" style="margin-top: 20px;">
		  <textarea class="form-control" style="width: 100%" rows="3" name="content"></textarea>
			</div>
		</form>
		<div class="col-sm-4">
      </div>
	</div>
  <script>
    
      $(function(){
          page = 1;
          $("#more").click(function(event) {
              page++;
              $.ajax({
                url: './getmore.php',
                type: 'post',
                dataType: 'json',
                data: {page: page},
              })
              .done(function(res) {
                if(res.code==1){
                  alert(res.msg);
                }else{

                  $msgList= res.data;

                  for(var i in $msgList){

                    $('#content').append('<div class="col-sm-4"><div class="panel panel-success"><div class="panel-heading" style="height: 40px;"><h3 class="panel-title" style="float: left;">'+$msgList[i].username+'</h3><a href="./edit.php?key=1" style="float: right;margin-left: 10px;" class="label label-success">修改</a><a href="./del.php?key=1" style="float: right;" class="label label-danger">删除</a></div><div class="panel-body">'+$msgList[i].content+'('+$msgList[i].ctime+')</div></div></div>');


                  }

                }
                console.log("success");
              })
              .fail(function() {
                console.log("通讯失败");
              })
              
          });


          $('#login').click(function(event) {
                data = $('#loginform').serialize();

                $.ajax({
                  url: './checklogin.php',
                  type: 'POST',
                  dataType: 'json',
                  data: data,
                })
                .done(function(res) {
                  if(res.code==1){
                      alert(res.msg);
                  }else{
                      location.reload();
                  }
                })
                .fail(function() {
                  console.log("error");
                })
                .always(function() {
                  console.log("complete");
                });
                
          });
      })
  </script>
</body>
</html>